<template>
   <!-- 主体区域 -->
   <section id="app">
      <!-- 输入框 -->
      
      <TodoHeader @add="add"></TodoHeader>
      <!-- 列表区域 -->
      <TodoBady :list="list"></TodoBady>

      <!-- 统计和清空 -->
      <TodoFoot></TodoFoot>
   </section>
</template>

<script>
import TodoBady from './components/TodoBady.vue';
import TodoFoot from './components/TodoFoot.vue';
import TodoHeader from './components/TodoHeader.vue';
export default {
   data() {
      return {
         list :[
            {id:1,name:'basekataball'},
            {id:2,name:'football'},
            {id:3,name:'pinpang'}
         ]
      }
   },
   components: {
      TodoBady,
      TodoFoot,
      TodoHeader
   },
   methods:{
      add(todoName){
         this.list.unshift({
            id:+new Date(),
            
            name:todoName
         })
      }
   }
}
</script>

<style></style>